import { View, Text} from "@tarojs/components"
import { useEffect, useState } from "react"
import { Strategy } from "src/types/Strategy"
import XModuleHeader from "../../../../components/XModuleHeader"
import './index.scss'

interface StrategyInfo extends Strategy {
    [key:string]:any;
}

export default (props:{strategy:StrategyInfo}) => {
    const Unit = () => {
        return <>
            {strategy.strategyType == 1 ? '小时' : '度'}
        </>
    }
    const strategy = props.strategy

    let [powerRules, setpowerRules] = useState<any[]>([])
    
    useEffect(() => {
        if(strategy.strategyType == 1 && strategy.rules) {
            let rules = strategy.rules
            rules.sort(function(a, b) {
                return a.w - b.w
            })
    
            let _strategyRule:any[] = []
            let len = rules.length
            for(let i = 0; i < len;) {
                let tmp = rules[i]
                let _i = i + 1
                if(_i >= len) {
                    _strategyRule.push(tmp)
                    break
                }
                for(; _i < len; _i ++) {
                    if(tmp.w != rules[_i].w) {
                        _strategyRule.push(tmp)
                        break
                    }
                }
    
                i = _i
            }
    
            setpowerRules(_strategyRule.map((rule, index) => ({min : index == 0 ? 0 : _strategyRule[index - 1].w, max : rule.w, amount : rule.a})))
        }
    }, [])
    


    return <>
        <View className='p-box'>
            <View>
                <XModuleHeader>基本信息</XModuleHeader>
                <View className='base-info'>
                    <View className='flex'>
                        <View className='flex-1'>策略类型：{strategy.strategyType == 1 ? '计时' : '计量'}</View>
                        <View className='flex-1'>策略名称：{strategy.strategyName}</View>
                    </View>
                    <View className='flex'>
                        <View className='flex-1'>单价：{strategy.unitPrice}元/<Unit /></View>
                        <View className='flex-1'>最小计费单位：{strategy.settleUnit}{strategy.strategyType == 1 ? '分钟' : '度'}</View>
                    </View>
                    <View className='flex'>
                        <View className='flex-1'>最大功率：{strategy.maxPower}W</View>
                        <View className='flex-1'>最小功率：{strategy.minPower}W</View>
                    </View>
                    <View className='flex'>
                        <View className='flex-1'>刷卡预付费：{strategy.cardChargeAmount}元</View>
                    </View>
                </View>
            </View>
            {strategy.strategyType == 1 &&
                <View className='m-t-30'>
                    <XModuleHeader>功率规则</XModuleHeader>
                    <View className='base-info overflow'>
                        {
                            powerRules.map(rule => <View className='rule-item'>{rule.min}W ~ {rule.max}W {rule.amount}元/小时</View>)
                        }
                        {/* <View className='flex'>
                            <View className='flex-1'>0W ~ 30W 30元/小时</View>
                            <View className='flex-1'>0W ~ 30W 30元/小时</View>
                        </View>
                        <View className='flex'>
                            <View className='flex-1'>0W ~ 30W 30元/小时</View>
                            <View className='flex-1'>0W ~ 30W 30元/小时</View>
                        </View>
                        <View className='flex'>
                            <View className='flex-1'>0W ~ 30W 30元/小时</View>
                            <View className='flex-1'>0W ~ 30W 30元/小时</View>
                        </View> */}
                    </View>
                </View>
            }
            <View className='m-t-30'>
                <XModuleHeader>预设</XModuleHeader>
                <View className='base-info overflow'>
                    {strategy.options &&
                        <>
                            {
                                strategy.options.map(option =><View className='option'>{option}元</View>)
                            }
                        </>
                    }
                </View>
            </View>
            <View className='m-t-30'>
                <XModuleHeader>备注</XModuleHeader>
                <View className='base-info'>{strategy.remark}</View>
            </View>
        </View>
    </>
}